<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>动物资源模型管理库</title>

  <!-- Bootstrap core CSS -->
  <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}  " rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="{%  static 'css/scrolling-nav.css' %}  " rel="stylesheet">

  {#  自定义导航条样式  #}
  <style type="text/css">
        .top{
    {#设置顶部横线,线宽、样式、颜色#}
    border-top:3px solid #a30000;
    /* 设置宽度高度背景颜色 */
    height:40px; /*高度改为自动高度*/
    width:100%;
    margin-left: 0;
    background:rgb(189, 181, 181);
    {#position: fixed; /*固定在顶部*/#}
    top: 5px;/*离顶部的距离为0*/
    margin-bottom: 5px;
    font-family: 微软雅黑;
    font-size: 20px;

}
.top ul{
    /* 清除ul标签的默认样式 */
    width: auto;/*宽度也改为自动*/
    list-style-type: none;
    white-space:nowrap;
    overflow: hidden;
    margin-left: 29%;
    /* margin-top: 0;          */
    padding: 0;
    text-align: center;

}
.top li {
    float:left; /* 使li内容横向浮动，即横向排列  */
    margin-right:2%;  /* 两个li之间的距离*/
    position: relative;
    overflow: hidden;
}
.top li a{
   /* 设置链接内容显示的格式*/
    border-bottom: #bd2130;
    display: block; /* 把链接显示为块元素可使整个链接区域可点击 */
    color: #0c0c0c;
    text-align: center;
    padding: 3px;
    overflow: hidden;
    text-decoration: none; /* 去除下划线 */

}
.top li a:hover{
    /* 鼠标选中时背景变为黑色 */
    background-color: #007bff;
    font-weight: bold;
    color: #bd2130;
}
.top ul li ul{
    /* 设置二级菜单 */
    margin-left: -0.2px;
    background:rgb(189, 181, 181);
    position: relative;
    display: none; /* 默认隐藏二级菜单的内容 */

}
.top ul li ul li{
    /* 二级菜单li内容的显示 */

    float:none;
    text-align: center;
}
.top ul li:hover ul{
    /* 鼠标选中二级菜单内容时 */
    display: block;
}
body{
    background:#eff3f5;
}

       </style>
</head>

<body id="page-top">

  <!-- Navigation -->
{#  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">#}
{#    <div class="container">#}
{#      <a class="navbar-brand js-scroll-trigger" href="#page-top">logo</a>#}
{#      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">#}
{#        <span class="navbar-toggler-icon"></span>#}
{#      </button>#}
{#      <div class="collapse navbar-collapse" id="navbarResponsive">#}
{#        <ul class="navbar-nav ml-auto">#}
{#          <li class="nav-item">#}
{#            <a class="nav-link js-scroll-trigger" href="#about">About</a>#}
{#          </li>#}
{#          <li class="nav-item">#}
{#            <a class="nav-link js-scroll-trigger" href="#services">Services</a>#}
{#          </li>#}
{#          <li class="nav-item">#}
{#            <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>#}
{#          </li>#}
{#        </ul>#}
{#      </div>#}
{#    </div>#}
{#  </nav>#}

  <header class="bg-primary text-white">
    <div class="container text-center">
      <h1>动物资源模型管理库</h1>
      <p class="lead">Animal Resource Model Management Center </p>
    </div>
  </header>
  <div class="top">
      <ul>
          <li><a href="/">首&nbsp页</a></li>
          <li><a href="#">实验动物</a></li>
          <li><a href="#">应用模型</a></li>
          <li><a href="#">质量控制</a></li>
          <li><a href="#">一级菜单</a></li>
          <li>
              <a href="#">一级菜单</a>
              <ul>
                  <li><a href="#">二级菜单</a></li>
                  <li><a href="#">二级菜单</a></li>
              </ul>
          </li>
      </ul>
  </div>




  <!-- Bootstrap core JavaScript -->
{#  <script src="{%  static 'vendor/jquery/jquery.min.js' %}"></script>#}
  <script type="text/javascript" charset="utf8" src="{% static 'js/jquery-1.10.2.min.js' %}"></script>
  <script src="{%  static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

  <!-- Plugin JavaScript -->
  <script src="{% static 'vendor/jquery-easing/jquery.easing.min.js'  %}"></script>

  <!-- Custom JavaScript for this theme -->
  <script src="{% static 'js/scrolling-nav.js' %} "></script>

</body>

</html>
